<template>
    <el-container id="app">
        <el-header style="display:flex;align-items: center;justify-content: space-between;background-color:#E9EEF3;">
            <div style="display:flex;align-items: center;background-color: white;padding:0 20px;width:195px;">
                <svg-icon icon-class="Logo" style="width:50px;height:50px;margin-right: 10px;" />
                深圳制造 工匠精神
            </div>
            <el-menu v-show="$router.currentRoute.name != 'LoginCom'" :default-active="activeIndex" class="el-menu-demo"
                :mode="'horizontal'" @select="handleSelect" background-color="#E9EEF3">
                <el-menu-item index="1">软件注册</el-menu-item>
                <el-menu-item index="2">后台管理</el-menu-item>
            </el-menu>
            <div style="display:flex;align-items: center;padding:0 20px;" v-if="$router.currentRoute.name != 'LoginCom'">
                <div style="
                    width:50px;
                    height:50px;
                    border-radius: 50%;
                    background-color: rgb(27, 198, 141);
                    margin-right: 10px;
                    text-align: center;
                    line-height: 50px;
                    color:white;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                    {{ userInfo.userName.substr(1, 1) }}</div>
                <el-popover placement="bottom" width="300" v-model="visible">
                    <el-container>
                        <el-header
                            style="height: 120px;background-color: white;display:flex;justify-content: center;align-items: center;">
                            <div style="
                    width:100px;
                    height:100px;
                    border-radius: 50%;
                    background-color: rgb(27, 198, 141);
                    margin-right: 10px;
                    text-align: center;
                    line-height: 100px;
                    font-size: xx-large;
                    color:white;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                                {{ userInfo.userName.substr(1, 1) }}</div>
                        </el-header>
                        <el-main style="display: flex;height:90px;line-height:30px;background-color: white;">
                            <div style="display: flex;flex-direction:column;flex:1;">
                                <div>用户名</div>
                                <div>姓名</div>
                            </div>
                            <div style="display: flex;flex-direction:column;width:80%;">
                                <div>{{ userInfo.account }}</div>
                                <div>{{ userInfo.userName }}</div>
                            </div>
                        </el-main>
                        <el-footer
                            style="height:100px;display:flex;flex-direction: column;align-items: center;justify-content: space-around;background-color: white;">
                            <el-button style="width: 90%;">修改账户密码</el-button>
                            <el-button style="width: 90%;margin:0;" @click="loginOut">退出登录</el-button>
                        </el-footer>
                    </el-container>
                    <el-button slot="reference">{{ userInfo.userName }}</el-button>
                </el-popover>
            </div>
        </el-header>
        <router-view v-bind:currentTab="currentTab"></router-view>
    </el-container>
</template>


<script>
import request from "../axios/request";
export default {
    data() {
        return {
            activeIndex: "1",
            currentTab: null,
            userInfo: {
                userName: "未知"
            },
            visible: false,
        }
    },
    methods: {
        async handleSelect(index) {
            this.currentTab = index
        },
        async loginOut() {
            let resOfLogout = await request({
                url: "/user/api/logout",
                method: "PUT",
            });
            if (resOfLogout.data.status == 200) {
                this.$router.go(0);
            }
        },
    },
    async beforeMount() {
        let resOfGetMyDetailInfo =await request({
            url: "/user/api/getMyDetailInfo",
            method: "GET"
        })
        this.userInfo = resOfGetMyDetailInfo.data.data
        console.log(this.userInfo);
    },
}
</script>

<style scoped>
.el-header {
    background-color: #436897;
    color: #333;
    text-align: center;
    line-height: 60px;
    border-bottom: #dee2e6 solid 1px;
    padding: 0;
}

#app {
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}


.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
</style>